import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { decreaseCount, increaseCount } from '../store/features/count'
export class Profile extends PureComponent {
  changeCount(val) {
    if(val>0) {
      this.props.increaseCount(val)
    } else {
      this.props.decreaseCount(Math.abs(val))
    }
  }

  render() {
    const { count, banners } = this.props
    return (
      <div>
        profile count: { count }
        <button onClick={e => this.changeCount(5)}>+5</button>
        <button onClick={e => this.changeCount(8)}>+8</button>
        <button onClick={e => this.changeCount(-10)}>-10</button>
        <div>
          轮播图：
          <ul>
            {
              banners.map((item, index) => {
                return <li key={index}>{item}</li>
              })
            }
          </ul>
        </div>
      </div>
    )
  }
}

const mapsStateToProps = (state) => ({
  count: state.count.count,
  banners: state.home.banners
})

const mapDispatchToProps = (dispatch) => ({
  increaseCount(val) {
    dispatch(increaseCount(val))
  }, 
  decreaseCount(val) {
    dispatch(decreaseCount(val))
  }
})

export default connect(mapsStateToProps, mapDispatchToProps)(Profile)